<template>
  <!-- <div>
    用户管理
  </div> -->
  <div>
    <!-- 条件搜索 -->
    <el-form :inline="true" :model="user" class="demo-form-inline">
      <el-form-item label="账号" style="float: left; margin-left:0px;">
        <el-input v-model="user.userAccount" style="width:100%;" laceholder="审批人"></el-input>
      </el-form-item>
      <!-- <el-form-item label="活动区域">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="姓名">
        <el-input v-model="user.userName" style="width:100%;"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" style="float: left; margin-left:40px;">
        <el-input v-model="user.userPhone" style="width:100%;"></el-input>
      </el-form-item>
      <el-form-item style="margin-left:20px;">
        <el-button type="primary" @click="getPageList()">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 新增 -->
    <router-link to="/user_save">
      <el-button type="primary" style="float:left; width:60px; height:32px; padding:0px;">新增</el-button>
    </router-link>
    <el-table :data="initData">
    <el-table-column prop="user_account" label="账号" width="120">
    </el-table-column>
    <el-table-column prop="user_name" label="姓名" width="120">
    </el-table-column>
    <el-table-column prop="user_age" label="年龄" width="120">
    </el-table-column>
    <el-table-column prop="user_sex" label="性别" width="120">
    </el-table-column>
    <el-table-column prop="user_phone" label="联系方式" width="120">
    </el-table-column>
    <el-table-column prop="user_role" label="角色" width="120">
    </el-table-column>
    <el-table-column prop="status" label="状态" width="120">
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 删除 -->
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)"> 
            删除
          </el-button>
          &nbsp;
          <!-- 编辑 -->
          <router-link :to="{
              name: 'user_edit',
              path:'/user_edit',
              params:{
                id:scope.row.id,
                userAccount:scope.row.user_account,
                userName:scope.row.user_name,
                userPhone:scope.row.user_phone,
                userRole:scope.row.user_role == '管理员' ? 1 : (scope.row.user_role == '超级管理员' ? 2 : 3),
                userSex:scope.row.user_sex == '男' ? 1 : 2,
                userAge:scope.row.user_age
              }
            }">
              <el-button type="primary" size="mini" icon="el-icon-edit"> 
                编辑
              </el-button>
          </router-link>
        </template>
    </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
    :current-page="pageNo"
    :page-size="pageSize"
    :total="total"
    style="padding: 30px 0; text-align: right;"
    layout="total, prev, pager, next, jumper"
    @current-change="getPageList"
    />
  </div>
</template>

<script>
import user from '@/api/user';
export default {
    name:'UserList',
    data(){
      return {
        pageNo:1,
        pageSize:20,
        total:0,
        initData: [],
        user:{
              userAccount:'',
              userName:'',
              userPhone:''
            }
      }
    },
    methods:{
      initUserData(){
        let queryUserDto = {
          pageNo:1,
          pageSize:this.pageSize,
          userAccount:this.user.userAccount,
          userName:this.user.userName,
          userPhone:this.user.userPhone
        }
        user.getUserList(queryUserDto).then(
          response => {
            console.log('用户列表响应数据：', response)
            let resCode = response.data.code
            let resMsg = response.data.message
            if(resCode == "200") {
              //响应成功，数据返回
              this.initData = response.data.data.data_list
              this.pageNo = response.data.data.page_no
              this.pageSize = response.data.data.page_size
              this.total = response.data.data.total
            } else {
              //异常提示
              this.$message({
                  type: 'error',
                  message: resMsg
              })
            }
          },
          error => {
            console.error('请求用户列表异常，异常信息：', error)
          }
        )
        
      },
      getPageList(pageNo = 1){
        this.pageNo = pageNo
        let queryUserDto = {
          pageNo:this.pageNo,
          pageSize:this.pageSize,
          userAccount:this.user.userAccount,
          userName:this.user.userName,
          userPhone:this.user.userPhone
        }
        user.getUserList(queryUserDto).then(
          response => {
            console.log('用户列表响应数据：', response)
            let resCode = response.data.code
            let resMsg = response.data.message
            if(resCode == "200") {
              //响应成功，数据返回
              this.initData = response.data.data.data_list
              this.pageNo = response.data.data.page_no
              this.pageSize = response.data.data.page_size
              this.total = response.data.data.total
            } else {
              //异常提示
              this.$message({
                  type: 'error',
                  message: resMsg
              })
            }
          },
          error => {
            console.error('请求用户列表异常，异常信息：', error)
          }
        )
      },
      removeDataById(id){
        console.log('删除用户id：', id)
        user.removeUser(id).then(
          response => {
            console.log('删除用户，响应信息：', response)
            let resData = response.data.data
            let resCode = response.data.code
            let resMsg = response.data.message
            if(resCode == '200' && resData){
              //提示
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              //删除成功，刷新页面
              location.reload()
            } else {
              //异常提示
              this.$message({
                  type: 'error',
                  message: resMsg
              })
            }
          },
          error => {
            console.log('删除管理员异常，异常信息：', error)
          }
        )
      }
    },
    beforeMount(){
      console.log('开始初始化用户信息...')
      this.initUserData()
    }
}
</script>

<style>

</style>